<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span class="title">客户告警记录（自营）</span>
      </div>
    </template>
    <SearchForm 
      :formData="formData"
      :columns="formColumns"
      @submit="methods.getList"
      @reset="methods.getList"
    />

    <CustomTable 
      :tableData="tableData"
      :columns="tableColumns"
      v-loading="loading"
      @rowClick="rowClick"
    />

    <Pagination 
      v-model:pageNum="pageInfo.pageNum"
      v-model:pageSize="pageInfo.pageSize"
      :total="total"
      :callback="() => {}"
    />
  </el-card>
  <Result :noRepeatId="noRepeatId" />

  <el-dialog
    v-model="dialogVisible"
    title="反馈信息"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
    width="70%"
  >
    <Temp :currentRow="currentRow" />
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed, onMounted, h } from 'vue'
import { ElTag } from 'element-plus/dist/index.full.js'
import { getList, getCfgIndexName } from '@/api/MonitorIndex/CustomerAlert'
import { useTable } from '@/hooks'
import { indexTypeList, indexSourceList, jysList } from '@/utils/catalogue'
import { formatDate } from '@/utils/tools'
import Result from './__Result__.vue'
import Drawer from './__Detail__.vue'
import TaskFlow from './__TaskFlow__.vue'
import Temp from './__Temp__.vue'

const userId = JSON.parse(localStorage.getItem('currentUser')).userId
const { tableData, pageInfo, total, loading, methods } = useTable({
  getDataApi: () => getList({
    ...formData, 
    ...pageInfo,
    userId,
    flag: 3,
    startTime: formData.createTime && formData.createTime[0] || '',
    endTime: formData.createTime && formData.createTime[1] || '',
  }),
})
const formData = reactive({
  khxm: '',
  indexSource: '',
  yyb: '',
  indexName: '',
  alertLevel: '',
  khh: '',
})

const formColumns = computed(() => ([
  { label: '营业部名称', prop: 'yybName', component: 'el-input', style: { width: '20%'} },
  { label: '客户号', prop: 'khh', component: 'el-input', style: { width: '20%'} },
  { label: '指标来源', prop: 'indexSource', component: 'el-select', options: indexSourceList, style: { width: '20%'} },
  { label: '指标名称', prop: 'indexName', component: 'el-select', options: indexNameList.value, style: { width: '20%'} },
  { 
    label: '告警等级', prop: 'alertLevel', component: 'el-select', 
    options: [
      { value: 1, label: '等级1' },
      { value: 2, label: '等级2' },
      { value: 3, label: '等级3' },
      { value: 4, label: '等级4' },
      { value: 5, label: '等级5' },
    ], 
    style: { width: '20%'} 
  },
  { 
    label: '时间范围', 
    prop: 'createTime', 
    component: 'el-date-picker', 
    componentProps: {
      type: 'daterange',
      'unlink-panels': true,
      format: 'YYYY-MM-DD HH:mm:ss',
      'value-format': 'YYYY-MM-DD'
    },
    style: { width: '30%'} 
  },
]))

const tableColumns = ref([
  { label: '序号', type: 'index', width: 60 },
  { label: '营业部名称', prop: 'yybName', width: 250, align: 'left' },
  { label: '客户号', prop: 'khh', width: 120 },
  { label: '客户姓名', prop: 'khxm', width: 200 },
  { 
    label: '指标来源', prop: 'indexSource', width: 100, 
    render: ({row}) => {
      const indexSource = indexSourceList.find(item => item.value === row.indexSource)
      if(indexSource) return indexSource.label
      return ''
    } 
  },
  { label: '指标名称', prop: 'indexName', width: 200, align: 'left' },
  { 
    label: '告警等级', 
    prop: 'alertLevel', 
    render: ({row}) => {
      const colorList = ['#2ecc71', '#3498db', '#FFD700', '#e67e22', '#e74c3c']

      return h(ElTag, 
      { 
        type: 'info', 
        color: colorList[row.alertLevel - 1], 
        effect: "dark",
        style: {
          border: colorList[row.alertLevel - 1]
        }
      }, () => `等级${row.alertLevel}`)
    }, 
    width: 100, 
  },
  { label: '重点客户组名称', prop: 'groupName', width: 200, align: 'left' },
  { label: '告警时间', prop: 'createTime', width: 200, render: ({row}) => formatDate(row.createTime) },
  { 
    label: '任务流程', 
    prop: 'state', 
    width: 600, 
    render: ({row}) => h(TaskFlow, {
      currentRow: row,
      onCustomEvent: handleCustomEvent
    }, () => row.state) 
  },
])

const dialogVisible = ref(false)
const currentRow = reactive({})
const handleCustomEvent = (row) => {
  dialogVisible.value = true
  Object.assign(currentRow, row)
}

const noRepeatId = ref('')

const rowClick = ({ row, columns }) => {
  noRepeatId.value = row.noRepeatId
}

const indexNameList = ref([])
const getCfgIndexNameList = async () => {
  const { data } = await getCfgIndexName()
  indexNameList.value = data.map(item => ({ value: item, label: item }))
}
watch(() => tableData.value, (val) => {
  noRepeatId.value = val[0]?.noRepeatId
})

onMounted(() => {
  getCfgIndexNameList()
})
</script>
